<template>
  <div class="juse1">
    <daohang @handletab="maodian" :list="list"></daohang>

    <div class="jueseContent" ref="jueseContent">
      <div class="zhuli" ref="title1" id="section1">
        <div class="inner-title  animate__animated animate__fadeInUp">
          <h2>智能助理</h2>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp" @click="toXq">
              <img src="~@/assets/images/juse2/xiangqing2.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-01s">
              <img src="~@/assets/images/juse2/juse2-img2.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-02s">
              <img src="~@/assets/images/juse2/juse2-img3.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-03s">
              <img src="~@/assets/images/juse2/juse2-img4.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-04s">
              <img src="~@/assets/images/juse2/juse2-img5.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-05s">
              <img src="~@/assets/images/juse2/juse2-img6.png" alt="">
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="zhuli" ref="title1" id="section2">
        <div class="inner-title  animate__animated animate__fadeInUp">
          <h2>数据驾驶舱</h2>
        </div>
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="img-item animate__animated animate__fadeInUp">
              <img src="~@/assets/images/juse2/juse2-img7.png" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-01s">
              <div class="qiehuan qh1" @click.stop="qiehuan(1)">

              </div>
              <div class="qiehuan qh2" @click.stop="qiehuan(2)">

              </div>
              <div class="qiehuan qh3" @click.stop="qiehuan(3)">

              </div>
              <img v-show="qiehuanIndex == 1" src="~@/assets/images/juse2/juse2-img8.png" alt="">
              <img v-show="qiehuanIndex == 2" src="~@/assets/images/juse2/qiehuan2.png" alt="">
              <img v-show="qiehuanIndex == 3" src="~@/assets/images/juse2/qiehuan3.png" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-02s">
              <img src="~@/assets/images/juse2/juse2-img9.png" alt="">
            </div>
          </el-col>
          <el-col :span="12">
            <div class="img-item animate__animated animate__fadeInUp animate__delay-03s">
              <img src="~@/assets/images/juse2/juse2-img10.png" alt="">
            </div>
          </el-col>

        </el-row>
      </div>
      <div class="zhuli" ref="title1" id="section4">
        <div class="inner-title  animate__animated animate__fadeInUp">
          <h2>待办事项</h2>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp">
              <img src="~@/assets/images/juse2/juse2-img14.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp">
              <img src="~@/assets/images/juse2/juse2-img15.png" alt="">
            </div>
          </el-col>
          <el-col :span="8">
            <div class="img-item animate__animated animate__fadeInUp">
              <img src="~@/assets/images/juse2/juse2-img16.png" alt="">
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="changyong" ref="title4" id="section5">
        <div class="title">
          常用功能
        </div>

        <div class="cyAll">
          <div class="cyItem" v-for="(item, i) in cyList" :key="i">
            <img :src="require(`@/assets/images/${item.img}.png`)" alt="">
            <div class="name">{{ item.name }}</div>



          </div>
        </div>
      </div>
      <div class="hangye" ref="title5" id="section5">
        <div class="title">
          行业资讯
        </div>

        <div class="daohang">
          <div class="dhItem" @click="dao(i)" :class="daoI == i ? 'active' : ''" v-for="(item, i) in hyList" :key="i">

            {{ item.name }}

          </div>
        </div>

        <div class="xinwen" v-show="daoI == 0">
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img17.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img18.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img19.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img20.png" alt="">
          </div>
        </div>
        <div class="xinwen" v-show="daoI == 1">
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img21.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img22.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img23.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img24.png" alt="">
          </div>
        </div>
        <div class="xinwen" v-show="daoI == 2">
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img25.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img26.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img27.png" alt="">
          </div>
          <div class="xwItem">
            <img src="~@/assets/images/juse2/juse2-img17.png" alt="">
          </div>
        </div>


      </div>


    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leixing: '',
      zn_list: [
        {
          type: '3',
          typeText: '预警',
          title: '育商风险提示',
          icon: 'zn1.png',
          title1: '问题商户：张亮麻辣烫',
          content: '根据育商风控指标，针对张亮麻辣烫商家 进',
          jianyi: '主动推动参与园区内营销活动，提升 销量或',
        },
        {
          type: '2',
          typeText: '投诉',
          title: '消费者投诉问题',
          icon: 'zn2.png',
          title1: '问题商户：禾之鲜回转寿司',
          content: '消费者通过315消协进行了关于商品质量问',
          jianyi: '在舆论上通过平台，做出正面积极响应 跟踪',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '【巴蜀】供应链系统致辞跟进',
          icon: 'zn3.png',
          title1: '系统使用率',
          content: '使用ERP系统商家：40% 使用WMS系',
          jianyi: '结合商区内商户的共同需求，统一招标。把控',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '茶饮态商户经营建议',
          icon: 'zn4.png',
          title1: '偏好分析',
          content: '通过对商品偏好分析发现用户对绿茶的接受度',
          jianyi: '商家增加特色茶饮品类，匹配用户的相 关需',
        },
        {
          type: '1',
          typeText: '跟进',
          title: '茶颜悦色入驻完成，运营服务介入',
          icon: 'zn5.png',
          title1: '运营指导',
          content: '1，享受商区统一要求的三保服务 2，享受',
          jianyi: '商家增加特色茶饮品类，匹配用户的相 关需',
        },
        {
          type: '3',
          typeText: '预警',
          title: '品牌事件反应预警',
          icon: 'zn2.png',
          title1: '问题商户：必胜客',
          content: '北京必胜客篡改食材保质期标签，一家 门店',
          jianyi: '1，公开透明食材操作间，建议使用直播方式',
        },
      ],
      daibanList: [
        // {
        //   type: '1',
        //   typeText: '待办审批',
        //   title: '【张亮麻辣烫】清退申请待审批',
        //   content: '白梅于2023.10.07邀约商户协商沟',
        //   jianyi: '请参照智能助手建议，清退【张亮麻辣烫】',
        // },
        {
          type: '2',
          typeText: '限时折扣',
          title: '9.27限时折扣活动——待审批',

        },
        {
          type: '2',
          typeText: '限时折扣',
          title: '9.27限时折扣活动——待审批',

        },
      ],

      list: [
        {
          id: '1',
          name: "智能助理",
          active: true,

        },
        {
          id: '2',
          name: "数据驾驶舱",
          active: false,

        },

        {
          id: '4',
          name: "重要待办",
          active: false,
        },
        {
          id: '5',
          name: "常用功能",
          active: false,
        },
        {
          id: '6',
          name: "行业资讯",
          active: false,
        },
      ],


      hyList: [
        {
          id: '1',
          name: '行业资讯',
        },
        {
          id: '1',
          name: '商圈资讯',
        },
        {
          id: '1',
          name: '竞业情报',
        },
        // {
        //   id: '1',
        //   name: '成长攻略',
        // },
      ],


      cyList: [
        {
          name: '同业联盟',
          img: 'cy1',
        },
        {
          name: '供应链共享',
          img: 'cy2',
        },
        {
          name: '异业联盟',
          img: 'cy3',
        },
        {
          name: '商业拓展',
          img: 'cy4',
        },
        {
          name: '消费者投诉',
          img: 'cy5',
        },
        {
          name: '政务协助',
          img: 'cy6',
        },
        {
          name: '技术协助',
          img: 'cy7',
        },
        {
          name: '商户投诉',
          img: 'cy8',
        },
        {
          name: '装修推荐',
          img: 'cy9',
        },
        {
          name: '停车助理',
          img: 'cy10',
        },
        {
          name: '商户管理',
          img: 'cy11',
        },
        {
          name: '更多',
          img: 'cy12',
        },
      ],



      qiehuanIndex: 1,

      jinxingIndex: 0,
      daoI: '0',
      interval: null,

    }
  },
  mounted() {
    let num = window.localStorage.getItem("status") || ''
    // console.log(num, 'num');
    this.leixing = num
    if (num == 1) {
      //提案返回过来的
      let obj1 = {
        type: '1',
        typeText: '跟进',
        title: '提质风险跟进',
        icon: 'fx1.png',
        title1: '问题商户：张亮麻辣烫',
        content: '提质张亮麻辣烫，白梅于2023.10.07邀约商户协商沟通',
        jianyi: '操作间直播，提高加工过程透明化，可以给与技术支持',
      }
      let obj2 = {
        type: '1',
        typeText: '待办审批',
        title: '【张亮麻辣烫】清退申请待审批',
        content: '白梅于2023.10.07邀约商户协商沟',
        jianyi: '请参照智能助手建议，清退【张亮麻辣烫】',
      }
      this.zn_list[0] = obj1
      this.daibanList.unshift(obj2)
    } else if (num == 2) {
      let obj1 = {
        type: '1',
        typeText: '跟进',
        title: '清退问题跟进',
        icon: 'fx2.png',
        title1: '问题商户：张亮麻辣烫',
        content: '白梅于2023.10.09号邀约商家协商处理清退事项',
        jianyi: '建议清退过程，拆除装潢，还原商铺原貌',
      }
      let obj2 = {
        type: '1',
        typeText: '审批通过',
        title: '[张亮麻辣烫]清退申请审批通过',
        content: '白梅于2023.10.09号邀约商家协商处理清退事项',
        jianyi: '建议清退过程，拆除装潢，还原商铺原貌',
      }
      this.zn_list[0] = obj1
      this.daibanList[0] = obj2

    }
    this.$forceUpdate()
  },
  methods: {
    maodian(num) {
      let parent = this.$refs['title' + num]
      let target = this.$refs.jueseContent

      this.$nextTick(() => {
        target.scrollTo(0, target.offsetTop - parent.offsetTop);
        console.log(target.offsetTop, 'target.offsetTop');
      })
      this.list.map((item, i) => {
        if (i <= (num - 1)) {
          item.active = true
        } else {
          item.active = false
        }
      })
      var tar = document.getElementById('section' + num)
      var soltop = tar.offsetTop
      $(this.$refs.jueseContent).animate({
        scrollTop: soltop - 280
      }, 666)
      this.$forceUpdate()
    },
    jinxingClick(item, i) {
      this.jx_List = item.list
      this.jinxingIndex = i
    },
    dao(i) {
      this.daoI = i
    },
    getImg(res) {
      //必须拼接一下
      return require(`@/assets/images/${res}`);//res就是图片的名字
    },
    to(item) {
      if (item.title1 == '问题商户：张亮麻辣烫') {
        this.$router.push({
          path: '/govIndexData/fengxian',
        })
      }
    },
    go(item) {
      if (item.type == 1 && this.leixing == 1) {
        this.$router.push({
          path: '/govIndexData/daiban',
        })
      } else if (item.type == 1 && this.leixing == 2) {
        this.$router.push({
          path: '/govIndexData/daiban2',
        })
      }
    },
    toXq() {
      // if (item.title1 == '问题商户：张亮麻辣烫') {
      this.$router.push({
        path: '/govIndexData2/daiban',
      })
      // }
    },
    qiehuan(num) {
      this.qiehuanIndex = num
    },
  },
}
</script>
<style scoped>
@import "../../../assets/css/buzoutiao.css";
</style>
<style lang="scss" scoped>
.anniu {
  cursor: pointer;
}

.img-item {
  position: relative;


  .qiehuan {
    position: absolute;
    width: 32%;
    height: 150px;
    top: 0;
  }

  .qh1 {
    left: 0%;
  }
  .qh2 {
    left: 50%;
    transform: translateX(-50%);
  }
  .qh3 {
    right: 0;
  }

}


.juse1 {
  height: 100%;
}

.jueseContent {
  // overflow-y: auto;
  // height: calc(100% - 88px);
}

.jindu {
  display: flex;
  align-items: center;
  width: 1376px;
  height: 88px;
  background: #FFFFFF;
  box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.03);
  border-radius: 12px 12px 12px 12px;
  opacity: 1;
  border: 0px solid #DDDDDD;
  margin-bottom: 32px;
}




.changyong {
  box-sizing: border-box;
  width: 100%;
  margin: 40px 0;

  .title {
    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }

  .cyAll {
    //  width: 100%;
    box-sizing: border-box;
    height: 312px;

    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
    box-sizing: border-box;
    padding: 40px 0px 0;
    display: flex;
    flex-wrap: wrap;

    .cyItem {
      width: 14.28%;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        // font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
      }

      &:hover {
        background: #F8F9FA;
      }

      border-radius: 8px;

      img {
        width: 40px;
        height: 40px;
        box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.57);
        border-radius: 9px;
      }
    }
  }
}

.daohang {
  display: flex;
  margin-bottom: 15px;

  .dhItem {
    cursor: pointer;
    margin-right: 5px;
    width: 112px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 3px;
    border: 1px solid #DCDCDC;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
  }

  .active {
    background: #0052D9;
    color: rgba(255, 255, 255, 0.9);
  }





}

.hangye {
  .title {

    font-size: 20px;
    // font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 15px;
  }


  .xinwen {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .xwItem {

      // width: 326px;
      // height: 368px;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(13, 46, 166, 0.02), 0px 2px 12px 0px rgba(13, 46, 166, 0.04), 0px 2px 6px 0px rgba(13, 46, 166, 0.02);
      border-radius: 8px;
      transition: all 0.4s;

      &:hover {
        transform: translateY(-10px);
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }




  }
}



.lv {
  border: 1px solid #0ED57D !important;
  color: #0ED57D !important;
}
</style>
